<template>
  <div class="flex flex-col flex-middle" id="keyboard">
    <van-row class="margin">
      <van-col span="9">電話號碼：</van-col>
      <van-col span="15">
        <input id="tel" placeholder="輸入電話號碼" type="tel">
      </van-col>
    </van-row>
    <div class="flex flex-center flex-middle margin">
      <label>就餐人數：</label>
      <span>{{ amount }}</span>
    </div>
    <van-row class="margin">
      <van-col class="btn">
        <van-button class="bgcolor" type="default" @click="bindNumberKeyboard('1')">1</van-button>
      </van-col>
      <van-col class="btn">
        <van-button class="bgcolor" type="default" @click="bindNumberKeyboard('2')">2</van-button>
      </van-col>
      <van-col class="btn">
        <van-button class="bgcolor" type="default" @click="bindNumberKeyboard('3')">3</van-button>
      </van-col>
      <van-col class="btn">
        <van-button class="bgcolor" type="default" @click="bindNumberKeyboard('4')">4</van-button>
      </van-col>
      <van-col class="btn">
        <van-button class="bgcolor" type="default" @click="bindNumberKeyboard('5')">5</van-button>
      </van-col>
      <van-col class="btn">
        <van-button class="bgcolor" type="default" @click="bindNumberKeyboard('6')">6</van-button>
      </van-col>
      <van-col class="btn">
        <van-button class="bgcolor" type="default" @click="bindNumberKeyboard('7')">7</van-button>
      </van-col>
      <van-col class="btn">
        <van-button class="bgcolor" type="default" @click="bindNumberKeyboard('8')">8</van-button>
      </van-col>
      <van-col class="btn">
        <van-button class="bgcolor" type="default" @click="bindNumberKeyboard('9')">9</van-button>
      </van-col>
      <van-col class="btn">
        <van-button class="bgcolor" type="default">X</van-button>
      </van-col>
      <van-col class="btn">
        <van-button class="bgcolor" type="default" @click="bindNumberKeyboard('0')">0</van-button>
      </van-col>
      <van-col class="btn">
        <van-button class="bgcolor" type="default"><img src="../assets/images/icon_single_left.png" class="icon-keyboard flex flex-center flex-middle" alt=""></van-button>
      </van-col>
    </van-row>
    <van-button class="get-code margin bgcolor" type="default" @click="getCode">取號</van-button>
    <van-row class="margin tool-btn">
      <van-col class="btn">
        <van-button class="bgcolor" type="default">桌台配置</van-button>
      </van-col>
      <van-col class="btn">
        <van-button class="bgcolor" type="default">打印測試</van-button>
      </van-col>
      <van-col class="btn">
        <van-button class="bgcolor" type="default">功能3</van-button>
      </van-col>
      <van-col class="btn">
        <van-button class="bgcolor" type="default">功能3</van-button>
      </van-col>
      <van-col class="btn">
        <van-button class="bgcolor" type="default">功能3</van-button>
      </van-col>
      <van-col class="btn">
        <van-button class="bgcolor" type="default">功能3</van-button>
      </van-col>
    </van-row>
    <van-row class="margin ">
      <van-col class="btn">
        <van-button class="bgcolor" type="default">button5</van-button>
      </van-col>
      <van-col class="btn">
        <van-button class="bgcolor" type="default">button5</van-button>
      </van-col>
      <van-col class="btn">
        <van-button class="bgcolor" type="default">button5</van-button>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { Toast, Dialog } from 'vant'
export default {
  name: 'keyboard',
  data() {
    return {
      amount: '',  // 就餐人數
    }
  },
  methods: {
    // 點擊數字鍵盤事件
    bindNumberKeyboard (num) {
      let allNumber = this.amount + num
      if (allNumber.length > 2) { // 點餐人數超過100
        Toast('點餐人數太龐大了，店裡坐不下')
        this.amount = ''
        return false
      }
      if (allNumber === '00') { // 點餐人數為0
        Toast('人數為零，不能取號')
        this.amount = ''
        return false
      }
      this.amount = allNumber
    },
    // 下單取號
    getCode () {
      let vm = this
      if (vm.amount != '' || vm.amount.length != 0) {
        Toast.loading({
          message: '取號中...',
          duration: 2000
        })
      } else {
        Toast.fail('請填寫點餐人數')
        return false
      }
    }
  }
}
</script>

<style scoped>
.bgcolor {
  background-color: #e4e7ed;
}
#keyboard {
  height: 96.5%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-left: 0.25rem;
}
.van-button {
  font-size: 0.9rem;
  width: 100%;
  height: 70px;
  white-space: nowrap;
  padding: 0 0.25rem;
}
.btn {
  width: 33.33%;
  padding: 0.25rem;
}
.margin {
  width: 100%;
  margin-top: 0.5rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#tel {
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 0.05rem solid #dcdfe6;
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
}
.icon-keyboard {
  width: 80%;
  margin: auto;
}
.get-code,.tool-btn {
  margin-bottom: 1.5rem;
}
</style>
